<style scoped lang="less">
	.part1,.part2,{
		width: 80%;
		display: flex;
		justify-content: space-between;
		margin-bottom: 20px;
		margin-left: 50px;
		div{
			width: 200px;
			display: flex;
			p{
				margin-right: 20px;
			}
		}
	}
	.orderinfo{
		// margin-left: 10px;
		margin-bottom: 20px;
		font-size: 17px;
		// margin-top: 20px;
	}
	.goodsInfo,{
		margin-left: 10px;
	}
	.ordorlog{
		margin-left: 10px;
		margin-bottom: 20px;
		margin-top: 20px;
	}
	.orderstuts{
		margin-left: 10px;
		margin-bottom: 20px;
		margin-top: 20px;
	}
	.part3{
		display: flex;
		width: 80%;
		margin-bottom: 20px;
		margin-left: 50px;
		p{
			margin-right: 20px;
		}
	}
	
	.common-layout{
		background: #f2f3f5;
		.el-header{
			padding:0 !important;
			height: 10vh;
		}
		.el-main{
			height: 86vh;
			width: 98%;
			background: #fff;
			margin: 10px auto;
		}
	}
</style>
<template>
	
	<div class="common-layout">
	    <el-container>
			<el-header><Header></Header></el-header>
			<el-main>
				<div class="orderdetail" style="display: flex;align-items: center;margin-bottom: 20px;">
					<span style="margin-right: 10px;cursor: pointer;display: flex;align-items: center;" @click="back">
						<el-icon><ArrowLeft /></el-icon>
						<span>返回</span>
						<span style="margin-left: 10px;">|</span>
					</span>
					<h3>订单详情</h3>
				</div>
				
				<div class="orderinfo">订单信息</div>
				<div class="part1">
					<div><p>订单编号：</p><p ref="tab1"></p></div>
					<div><p>配送方式：</p><p ref="tab2"></p></div>
					<div><p>买家留言：</p><p>{{tab6}}</p></div>
				</div>
				<div class="part2">
					<div><p>订单来源：</p><p ref="tab3"></p></div>
					<div><p>备注：</p> 
						<el-tooltip
							class="box-item"
							effect="light"
							:content="tab4"
							placement="top"
						  >
						<p style="width: 80px; height: 20px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;">{{tab4}}</p>
						</el-tooltip>
				</div>
				</div>
				<div class="orderstuts">订单状态</div>
				<div class="part3">
					<p>订单状态：</p><p ref="tab5"></p>
				</div>
				
				<div class="goodsInfo">商品信息</div>
				<el-table :data="tableData" style="width: 100%;display: flex;">
					<el-table-column label="商品名称" style="width: 30%;">
						<template #default="image">
							<img :src="downloadUrl+image.row.goods_image" class="avatar" style=" width:60px;height: 60px;object-fit: cover;" />
							{{image.row.goods_name}}
						</template>
					</el-table-column>
					<el-table-column label="价格" style="width: 30%;" >
						<template #default="{ row }">
							￥{{row.price_value}}
						</template>
					</el-table-column>
					<el-table-column prop="order_goods_num" label="数量" style="width: 30%;"></el-table-column>
				
				</el-table>
				<div class="ordorlog">订单日志</div>
				<el-timeline style="max-width: 600px;margin-left: 50px;">
				    <el-timeline-item
				      v-for="(item, index) in loglist"
				      :key="index"
				      :timestamp="item.create_time"
					  type="primary"
				    >
					{{item.user_name}}
				    {{ item.order_status_name }}
				    </el-timeline-item>
				  </el-timeline>
				
			</el-main>
	    </el-container>
	</div>
</template>

<script setup>
	import { ref,onMounted } from "vue";
	import Header from "@/components/Header.vue"
	import { useRouter,useRoute } from 'vue-router'
	import { downloadUrl,baseUrl } from "@/utils/request";
	import {ArrowLeft} from '@element-plus/icons-vue'
	let router=useRouter()
	const back=()=>{
		router.push("/marketSys/ordermanage/orderlist")
	}
	import {
		getOrderdetail,
		getOrderloglist,
		updateOrderStatus
	} from "@/api";
	const tableData=ref([]);
	const tab1=ref(null)
	const tab2=ref(null)
	const tab3=ref(null)
	const tab4=ref(null)
	const tab5=ref(null)
	const tab6=ref(null)
	const getgoodsdetail = async () => {
		let res = await getOrderdetail({	
			orderId: Number(sessionStorage.getItem("ordetailID"))
		})
		// console.log("详情",res)
		tableData.value = res;
		// console.log(tableData.value[0].goods_image);
		tab1.value.innerText=`${tableData.value[0].order_code}`
		tab2.value.innerText=`${tableData.value[0].order_delivery_name}`
		tab3.value.innerText=`${tableData.value[0].order_source_name}`
		tab4.value=tableData.value[0].order_notes
		tab5.value.innerText=`${tableData.value[0].order_status_name}`
		tab6.value=tableData.value[0].order_message
		
	}
	let loglist=ref([])
	const getloglist = async () => {
		let res = await getOrderloglist({	
			orderId: Number(sessionStorage.getItem("ordetailID"))
		})
		loglist.value = res;
		//处理时间
		loglist.value.forEach((v)=>{
			v.create_time = v.create_time.replace("T"," ")
		})
		// console.log("日志",res);
	}
	const getorderstatus= async () => {
		let res = await updateOrderStatus({	
			orderId: Number(sessionStorage.getItem("ordetailID")),
			orderStatusId:12,
			siteId: Number(sessionStorage.getItem("siteId")),
			
		})
		// console.log(res);
	}
	
	
	onMounted(() => {
		getgoodsdetail()
		getloglist()
		getorderstatus()
	})


</script>

